<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

<script>
export default {
  name: 'Home',

  data () {
    return {
      msg: 'abc'
    }
  },

  // 组件内的前置钩子
  beforeRouteEnter(to, from, next) {
    // 不能通过this访问组件对象
    console.log('组件内 beforeRouteEnter()', this) // undefined
    // next()
    // 指定的回调函数在组件对象创建才会执行, 并且将组件对象作为参数敘
    next((component) => {
      console.log(component.msg)
    })
  },

  // 参数发生变化时, 组件更新前调用
  beforeRouteUpdate(to, from, next) {
    console.log('组件内 beforeRouteUpdate()')
    next()
  },

  // 路由组件离开前调用
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    console.log('组件内 beforeRouteLeave()')
    next()
  },
};
</script>
